
// Canvas矩形绘制工具
export default class Rectangle {
  /**
   * 绘制圆角矩形
   * @param {CanvasRenderingContext2D} ctx - Canvas上下文
   * @param {number} x - 左上角x坐标
   * @param {number} y - 左上角y坐标
   * @param {number} width - 宽度
   * @param {number} height - 高度
   * @param {number} radius - 圆角半径
   * @param {Object} options - 配置选项
   */
  static draw(ctx, x, y, width, height, radius, options = {}) {
    const {
      fillStyle = '#3498db',
      strokeStyle = '#3498db',
      lineWidth = 2,
      shadowColor = 'rgba(0,0,0,0.1)',
      shadowBlur = 10,
      title = ''
    } = options;

    ctx.save();

    // 设置阴影效果
    // ctx.shadowColor = shadowColor;
    // ctx.shadowBlur = shadowBlur;
    // ctx.shadowOffsetX = 0;
    // ctx.shadowOffsetY = 2;

    // 开始绘制路径
    ctx.beginPath();
    // 从左上角开始，顺时针绘制圆角矩形
    ctx.moveTo(x + radius, y);
    // 上边线
    ctx.lineTo(x + width - radius, y);
    // 右上角圆弧
    ctx.arcTo(x + width, y, x + width, y + radius, radius);
    // 右边线
    ctx.lineTo(x + width, y + height - radius);
    // 右下角圆弧
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
    // 下边线
    ctx.lineTo(x + radius, y + height);
    // 左下角圆弧
    ctx.arcTo(x, y + height, x, y + height - radius, radius);
    // 左边线
    ctx.lineTo(x, y + radius);
    // 左上角圆弧
    ctx.arcTo(x, y, x + radius, y, radius);

    ctx.closePath();

    // 填充和描边
    if (fillStyle) {
      ctx.fillStyle = fillStyle;
      ctx.fill();
    }

    ctx.fillStyle = strokeStyle;
    ctx.font = '24px Microsoft YaHei-Regular';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    ctx.fillText(title, x + width / 2, y + 17);

    if (strokeStyle) {
      ctx.strokeStyle = strokeStyle;
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    }

    ctx.restore();
  }

  /**
   * 绘制渐变圆角矩形
   * @param {CanvasRenderingContext2D} ctx - Canvas上下文
   * @param {number} x - 左上角x坐标
   * @param {number} y - 左上角y坐标
   * @param {number} width - 宽度
   * @param {number} height - 高度
   * @param {number} radius - 圆角半径
   * @param {Array} gradientColors - 渐变颜色数组
   */
  static drawGradient(ctx, x, y, width, height, radius, gradientColors) {
    const gradient = ctx.createLinearGradient(x, y, x, y + height);
    gradientColors.forEach((color, index) => {
      gradient.addColorStop(index / (gradientColors.length - 1), color);
    });

    this.draw(ctx, x, y, width, height, radius, {
      fillStyle: gradient,
      strokeStyle: null
    });
  }
  /**
   * 绘制菱形
   * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
   * @param {number} x - 菱形中心点 x 坐标
   * @param {number} y - 菱形中心点 y 坐标
   * @param {number} width - 菱形宽度（水平对角线长度）
   * @param {number} height - 菱形高度（垂直对角线长度）
   * @param {Object} options - 配置选项
   * @param {string} [options.fillColor] - 填充颜色
   * @param {string} [options.strokeColor] - 描边颜色
   * @param {number} [options.lineWidth=1] - 描边宽度
   * @param {CanvasGradient} [options.gradient] - 渐变对象（优先级高于 fillColor）
   * @param {number} [options.rotation=0] - 旋转角度（弧度）
   */
  static drawDiamond(ctx, x, y, width, height, options = {}) {
    const {
      fillColor,
      strokeColor,
      lineWidth = 1,
      gradient,
      rotation = 0
    } = options;

    ctx.save();

    // 应用旋转
    ctx.translate(x, y);
    ctx.rotate(rotation);
    ctx.translate(-x, -y);

    // 开始绘制路径
    ctx.beginPath();
    ctx.moveTo(x, y - height / 2);     // 上顶点
    ctx.lineTo(x + width / 2, y);      // 右顶点
    ctx.lineTo(x, y + height / 2);     // 下顶点
    ctx.lineTo(x - width / 2, y);      // 左顶点
    ctx.closePath();

    // 应用样式
    if (gradient) {
      ctx.fillStyle = gradient;
    } else if (fillColor) {
      ctx.fillStyle = fillColor;
    }

    if (fillColor || gradient) {
      ctx.fill();
    }

    if (strokeColor) {
      ctx.strokeStyle = strokeColor;
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    }

    ctx.restore();
  }

  /**
   * 绘制梯形（支持选择性边框）
   * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
   * @param {number} x - 梯形左下角 x 坐标（基准点）
   * @param {number} y - 梯形左下角 y 坐标（基准点）
   * @param {number} topWidth - 上底宽度
   * @param {number} bottomWidth - 下底宽度
   * @param {number} height - 梯形高度
   * @param {number} topOffset - 上底相对于下底的偏移量
   * @param {Object} options - 配置选项
   * @param {string} [options.fillColor] - 填充颜色
   * @param {string} [options.strokeColor] - 描边颜色
   * @param {number} [options.lineWidth=1] - 描边宽度
   * @param {CanvasGradient} [options.gradient] - 渐变对象
   * @param {number} [options.rotation=0] - 旋转角度（弧度）
   * @param {boolean} [options.antiAlias=true] - 是否启用抗锯齿
   * @param {Object} [options.edges] - 边框选择
   * @param {boolean} [options.edges.top=true] - 是否绘制上边框
   * @param {boolean} [options.edges.bottom=true] - 是否绘制下边框
   * @param {boolean} [options.edges.left=true] - 是否绘制左边框
   * @param {boolean} [options.edges.right=true] - 是否绘制右边框
   */
  static drawTrapezoid(ctx, x, y, topWidth, bottomWidth, height, topOffset, options = {}) {
    const {
      fillColor,
      strokeColor,
      lineWidth = 1,
      gradient,
      rotation = 0,
      antiAlias = true,
      edges = {
        top: true,
        bottom: true,
        left: true,
        right: true
      }
    } = options;

    ctx.save();

    // 抗锯齿处理
    if (antiAlias) {
      ctx.translate(0.5, 0.5);
    }

    // 计算梯形中心点用于旋转
    const centerX = x + Math.max(bottomWidth, topOffset + topWidth) / 2;
    const centerY = y - height / 2;

    // 应用旋转
    ctx.translate(centerX, centerY);
    ctx.rotate(rotation);
    ctx.translate(-centerX, -centerY);

    // 定义梯形的四个顶点
    const points = [
      { x: x, y: y },                           // 左下角 (0)
      { x: x + bottomWidth, y: y },             // 右下角 (1)
      { x: x + topOffset + topWidth, y: y - height }, // 右上角 (2)
      { x: x + topOffset, y: y - height }       // 左上角 (3)
    ];

    // 1. 先绘制填充部分（完整路径）
    if (fillColor || gradient) {
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      ctx.lineTo(points[1].x, points[1].y);
      ctx.lineTo(points[2].x, points[2].y);
      ctx.lineTo(points[3].x, points[3].y);
      ctx.closePath();

      if (gradient) {
        ctx.fillStyle = gradient;
      } else if (fillColor) {
        ctx.fillStyle = fillColor;
      }
      ctx.fill();
    }

    // 2. 再绘制选中的边框
    if (strokeColor) {
      ctx.strokeStyle = strokeColor;
      ctx.lineWidth = lineWidth;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';

      // 绘制下边框
      if (edges.bottom) {
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);
        ctx.lineTo(points[1].x, points[1].y);
        ctx.stroke();
      }

      // 绘制右边框
      if (edges.right) {
        ctx.beginPath();
        ctx.moveTo(points[1].x, points[1].y);
        ctx.lineTo(points[2].x, points[2].y);
        ctx.stroke();
      }

      // 绘制上边框
      if (edges.top) {
        ctx.beginPath();
        ctx.moveTo(points[2].x, points[2].y);
        ctx.lineTo(points[3].x, points[3].y);
        ctx.stroke();
      }

      // 绘制左边框
      if (edges.left) {
        ctx.beginPath();
        ctx.moveTo(points[3].x, points[3].y);
        ctx.lineTo(points[0].x, points[0].y);
        ctx.stroke();
      }
    }

    ctx.restore();
  }

  /**
 * 绘制只带左右边框的梯形（便捷方法）
 * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
 * @param {number} x - 梯形左下角 x 坐标
 * @param {number} y - 梯形左下角 y 坐标
 * @param {number} topWidth - 上底宽度
 * @param {number} bottomWidth - 下底宽度
 * @param {number} height - 梯形高度
 * @param {number} topOffset - 上底偏移量
 * @param {Object} options - 配置选项（同 drawTrapezoid，但边框只保留左右）
 */
  static drawTrapezoidWithSideEdges(ctx, x, y, topWidth, bottomWidth, height, topOffset, options = {}) {
    const sideEdgesOptions = {
      ...options,
      edges: {
        top: false,
        bottom: false,
        left: true,
        right: true
      }
    };
    this.drawTrapezoid(ctx, x, y, topWidth, bottomWidth, height, topOffset, sideEdgesOptions);
  }

  /**
  * 绘制只带上下边框的梯形（便捷方法）
  * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
  * @param {number} x - 梯形左下角 x 坐标
  * @param {number} y - 梯形左下角 y 坐标
  * @param {number} topWidth - 上底宽度
  * @param {number} bottomWidth - 下底宽度
  * @param {number} height - 梯形高度
  * @param {number} topOffset - 上底偏移量
  * @param {Object} options - 配置选项（同 drawTrapezoid，但边框只保留上下）
  */
  static drawTrapezoidWithHorizontalEdges(ctx, x, y, topWidth, bottomWidth, height, topOffset, options = {}) {
    const horizontalEdgesOptions = {
      ...options,
      edges: {
        top: true,
        bottom: true,
        left: false,
        right: false
      }
    };
    this.drawTrapezoid(ctx, x, y, topWidth, bottomWidth, height, topOffset, horizontalEdgesOptions);
  }

  /**
  * 绘制等腰梯形（便捷方法）
  * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
  * @param {number} x - 梯形中心点 x 坐标
  * @param {number} y - 梯形中心点 y 坐标
  * @param {number} topWidth - 上底宽度
  * @param {number} bottomWidth - 下底宽度
  * @param {number} height - 梯形高度
  * @param {Object} options - 配置选项（同 drawTrapezoid）
  */
  static drawIsoscelesTrapezoid(ctx, x, y, topWidth, bottomWidth, height, options = {}) {
    const startX = x - bottomWidth / 2;
    const startY = y - height / 2;
    this.drawTrapezoid(ctx, startX, startY, topWidth, bottomWidth, height, options);
  }

  /**
  * 创建线性渐变
  * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
  * @param {number} x0 - 渐变起点 x
  * @param {number} y0 - 渐变起点 y
  * @param {number} x1 - 渐变终点 x
  * @param {number} y1 - 渐变终点 y
  * @param {string[]} colors - 颜色数组
  * @returns {CanvasGradient} 渐变对象
  */
  static createLinearGradient(ctx, x0, y0, x1, y1, colors) {
    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
    colors.forEach((color, index) => {
      gradient.addColorStop(index / (colors.length - 1), color);
    });
    return gradient;
  }

  /**
  * 创建径向渐变
  * @param {CanvasRenderingContext2D} ctx - Canvas 2D 上下文
  * @param {number} x - 渐变中心 x
  * @param {number} y - 渐变中心 y
  * @param {number} r0 - 内圆半径
  * @param {number} r1 - 外圆半径
  * @param {string[]} colors - 颜色数组
  * @returns {CanvasGradient} 渐变对象
  */
  static createRadialGradient(ctx, x, y, r0, r1, colors) {
    const gradient = ctx.createRadialGradient(x, y, r0, x, y, r1);
    colors.forEach((color, index) => {
      gradient.addColorStop(index / (colors.length - 1), color);
    });
    return gradient;
  }
}

